<template>
  <div class="content-wraper">
    <div class="detail">
      <com-table
        :data="dataList"
        :columns="columns"
        :total="total"
        @pageChange="pageChange"
      >
        <template v-slot:createTime="{ row: { createTime } }">
          {{ dateFormat(createTime) }}
        </template>
        <template v-slot:options="{ row }">
          <el-button
            type="success"
            size="mini"
            @click="startProcess(row)"
          >打印</el-button>
        </template>
      </com-table>
    </div>
    <add-other-payment-info
      :show-modal.sync="showModal"
      :opt-type="optType"
      :data="unitDetail"
      @freshList="search"
    />
    <process-start :show-modal.sync="showStartModal" :currentrow="unitDetail" @freshList="search" />
    <workflow-schedule :show-modal.sync="showWorkflowSchedule" :data="workflowScheduleData" />
    <!---->
    <section>
      <div v-show="printIs == true" id="printoder" ref="print">
        <div class="content">
          <h5>麻城市宏远路桥工程有限公司项目月度资金计划申请支付审批表</h5>
          <div class="head">
            <div>申请日期：{{ data.applyTime }}</div>
            <div>金额单位： 元</div>
          </div>
          <div class="name">
            <div class="project">项目名称（盖章）</div>
            <div class="project-name">{{ data.projectName }}</div>
          </div>
          <div class="table">
            <div class="td flex">支付对象</div>
            <div class="td-2 flex ">对应会计科目</div>
            <div class="td-1 flex ">计划金额</div>
            <div class="td-2 flex ">核定金额</div>
            <div class="td-3 flex ">备注</div>
          </div>
          <div v-for="(item,index) in data.lstDetail" :key="index" class="table">
            <div class="td flex">{{ item.payObject ||'-' }}</div>
            <div class="td-2 flex ">
              {{ item.payContent ||'-' }}
            </div>
            <div class="td-1 flex ">
              {{ item.planAmount ||"-" }}
            </div>
            <div class="td-2 flex ">
              {{ item.approvedAmount ||"-" }}
            </div>
            <div class="td-3 flex">
              {{ item.remark ||' ' }}
            </div>
          </div>
          <div class="flex">
            <div class="left">
              <div class="left-text1">填报人</div>
            </div>
            <div class="right">
              <div class="right-text4">财务负责人</div>
            </div>
          </div>
          <div class="flex">
            <div class="left">
              <div class="left-text2">资金申请人</div>
            </div>
            <div class="right">
              <div class="right-text5">分管财务领导审批</div>
            </div>
          </div>
          <div class="flex">
            <div class="left">
              <div class="left-text3">部门分管领导意见</div>
            </div>
            <div class="right">
              <div class="right-text6">主管领导意见</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import workflowSchedule from '@/components/TreeModal/workflowSchedule'
import {
  getProjectFundPlanFinishInfoList,
  deleteOtherPaymentInfo
} from '@/api/moneyManage'
import moment from 'moment'
import { getDictName } from '@/utils/comm'
import addOtherPaymentInfo from './addOtherPaymentInfo.vue'
import { workflowStatus } from '@/utils/dicData'
export default {
  name: 'OtherPaymentInfo',
  components: {
    addOtherPaymentInfo,
    workflowSchedule
  },
  data() {
    return {
      printIs: false,
      name: '',
      getDictName,
      workflowStatus,
      showStartModal: false,
      dataList: [],
      data: {},
      total: 0,
      pageParams: {
        pageNum: 1,
        pageSize: 10
      },
      showWorkflowSchedule: false,
      workflowScheduleData: {},
      showModal: false,
      optType: 'add',
      unitDetail: {},
      columns: [
        {
          label: '申请时间',
          prop: 'applyTime'
        },
        {
          label: '项目名称',
          prop: 'projectName'
        },
        // {
        //   label: "支付对象",
        //   prop: "payObject",
        // },
        // {
        //   label: "支付内容",
        //   prop: "payContent",
        // },
        // {
        //   label: "计划金额",
        //   prop: "planAmount",
        // },
        // {
        //   label: "核定金额",
        //   prop: "approvedAmount",
        // },
        // {
        //   label: "备注",
        //   prop: "remark",
        // },

        {
          fixed: 'right',
          label: '操作',
          prop: 'options',
          slot: 'options'
        }
      ]
    }
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    startProcess(data) {
      this.data = data
      this.printIs = true
      setTimeout(() => {
        this.$print(this.$refs.print)
      }, 500)
      setTimeout(() => {
        this.printIs = false
      }, 1000)
    },
    dateFormat(data) {
      if (data) {
        return moment(data).format('YYYY-MM-DD')
      } else {
        return ''
      }
    },
    pageChange(data) {
      this.pageParams = data
      this.getDataList()
    },
    getDataList() {
      const params = {
        ...this.pageParams
      }
      getProjectFundPlanFinishInfoList(params).then((res) => {
        const { data, total } = res.data || {}
        if (data) {
          this.dataList = data
          this.dataList.forEach((item) => {
            item.applyTime = moment(item.applyTime).format('YYYY-MM-DD')
          })
          this.total = total - 0
        }
      })
    },
    addOtherPaymentInfo() {
      this.optType = 'add'
      this.showModal = true
    },
    editOtherPaymentInfo(data) {
      this.optType = 'edit'
      this.unitDetail = data
      this.showModal = true
    },
    viewDetail(data) {
      this.optType = 'detail'
      this.unitDetail = data
      this.showAddFileModal = true
    },
    delOtherPaymentInfo(data) {
      this.$confirm('确定要删除该其他资金支付吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const { id } = data
          deleteOtherPaymentInfo({
            otherPaymentInfoId: id
          }).then((res) => {
            const { code, msg } = res
            if (code === '0001') {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getDataList()
            } else {
              this.$message({
                type: 'error',
                message: msg || '删除失败!'
              })
            }
          })
        })
        .catch(() => {})
    },
    search() {
      this.pageParams.pageNum = 1
      this.getDataList()
    },
    reset() {}
  }
}
</script>

<style lang="scss" scoped>
.search-box {
  height: 50px;
}
.detail {
  height: calc(100% - 50px);
}
#printoder {

  .content {
    width: 794px;
    height: 1173px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    border-left: 1px solid #000;
    text-align: center;
  }
  .head {
    display: flex;
    justify-content: space-between;
    padding:  20px;
  }
  h5 {
    font-size: 20px;
  }
  .name {
    width: 100%;
    display: flex;
    align-items: center;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    .project {
      width: 242px;
      height: 100%;
      padding: 20px 0px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-right: 1px solid #000;
    }
    .project-name {
      width: 552px;
      padding: 20px 0px;

      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .table {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #000;
    .td {
      width: 240px;
      padding: 20px 0px;
      height: 100%;

    }
    .td-1 {
      width: 120px;
      // padding: 20px 0px;
      height: 100%;
    }
    .td-2 {
      width: 107px;
      padding: 20px 0px;
      // height: 100%;
      border-left: 1px solid #000;
      border-right: 1px solid #000;
    }
    .td-3 {
      width: 218px;
      // padding: 20px 0px;
      height: 100%;
    }
  }
  .fill {
    width: 100%;

    border-bottom: 1px solid #000;
    .fill-left {
      .person {
        width: 105px;
        padding: 55px 0;
      }
    }

    .bot {

      display: flex;
      justify-content: space-between;
    }
    .bto-left {
      width: 105px;

    }
    .bot-right {
      width: 120px;

    }
  }
}
.left {
  width: 347px;
  border-bottom: 1px solid #000;
  .left-text1 {
      width: 107px;
      border-right: 1px solid #000;
      line-height: 21px;
      padding: 30px 0px 30px 0px;
  }
  .left-text2 {
    width: 107px;
    border-right: 1px solid #000;
    padding: 30px 0px 30px 0px;
    line-height: 20px;
  }
  .left-text3 {
    width: 107px;
    padding: 50px 0px 50px 0px;
    border-right: 1px solid #000;
    line-height: 20px;
  }
}

.right {
  width: 447px;
  // height: 160px;
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
  .right-text4 {
    width: 121px;
    line-height: 20px;
    padding: 31px 0px 30px 0px;
    border-right: 1px solid #000;
  }
  .right-text5 {
    width: 121px;
    padding: 30px 0px 30px 0px;
    line-height: 20px;
    border-right: 1px solid #000;
  }
    .right-text6 {
    width: 121px;
    padding: 60px 0px 60px 0px;
    line-height: 20px;
    border-right: 1px solid #000;
   }
}

.border-r {
  border-right: 1px solid #000;
}

.border-l {
  border-left: 1px solid #000;
}

.border-t {
  border-top: 1px solid #000;
}

.border-b {
  border-bottom: 1px solid #000;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
